import {
    Button,
    Form,
    Input,
} from 'antd';
import './TodoList.scss'
import { useState, useContext } from 'react';
import ContextTodo from './contextTodo'

const Top = () => {
    const context = useContext(ContextTodo)

    const [form, Todolist] = useState({
        headline: "",
        date: "",
        priority: ""
    })
    // 标题
    const Headline = (e) => {
        // console.log(e);
        Todolist({ ...form, headline: e.target.value })
    }
    // 日期
    const Date = (e) => {
        // console.log(e);
        Todolist({ ...form, date: e.target.value })
    }
    // 优先级
    const Priority = (e) => {
        // console.log(e);
        Todolist({ ...form, priority: e.target.value })
    }
    // 提交 
    const Submit = () => {
        let { headline, date, priority } = form
        context.add({ headline, date, priority })

    }
    return (
        <>
            <div className='TodoList'>
                <Form labelCol={{ span: 4, }} wrapperCol={{ span: 14, }} layout="horizontal" style={{ maxWidth: 600, }}>
                    <Form.Item label="标题">
                        <Input value={form.headline} onChange={Headline} />
                    </Form.Item>
                    <Form.Item label="日期">
                        {/* <DatePicker value={form.date} onChange={Date} /> */}
                        <input type="date" value={form.date} onChange={Date} style={{ width: 300, height: 30 }} />
                    </Form.Item>
                    <Form.Item label="优先级">
                        <Input value={form.priority} onChange={Priority} />
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" style={{ marginLeft: 300 }} onClick={Submit}>提交</Button>
                    </Form.Item>
                </Form>
            </div>
        </>
    );
};
export default Top;